<template>
  <div style=" width: 97%; margin: auto;">
    <el-row>
      <el-col :span="18">
        <h3>本年度承接政府委托职能、购买服务项目、政府补贴情况</h3>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button  size="default" style="width: 100px;margin-top: 13px;" type="primary" @click="addList()">新增</el-button>
      </el-col>
    </el-row>
    <el-form :model="listForm" ref="listFormRef">
    <el-row>
      <el-col :span="24" style="margin-top: 20px;">
        <el-table :header-cell-style="{background: '#F0F5FA',color: '#333333'}"  size="default" :data="listForm" border>
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column prop="projectType" label="项目类型" align="center" width="200">
            <template #default="scope">
<!--              :rules="listFormRules.projectType"-->
              <el-form-item :prop="'[' + scope.$index + '].projectType'" >
              <el-select clearable  v-model="scope.row.projectType" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in projectTypeOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="projectName" label="项目名称" align="center" width="200">
            <template #default="scope">
<!--              :rules="listFormRules.projectName"-->
              <el-form-item :prop="'[' + scope.$index + '].projectName'" >
              <el-input v-model="scope.row.projectName" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="purchasingEntity" label="购买主体" align="center" width="200">
            <template #default="scope">
<!--              :rules="listFormRules.purchasingEntity"-->
              <el-form-item :prop="'[' + scope.$index + '].purchasingEntity'" >
              <el-input v-model="scope.row.purchasingEntity" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始日期" align="center" width="150">
            <template #default="scope">
<!--              :rules="listFormRules.startTime"-->
              <el-form-item :prop="'[' + scope.$index + '].startTime'" >
              <el-date-picker
                v-model="scope.row.startTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="开始日期">
              </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="结束日期" align="center" width="150">
            <template #default="scope">
<!--              :rules="listFormRules.endTime"-->
              <el-form-item :prop="'[' + scope.$index + '].endTime'" >
              <el-date-picker
                v-model="scope.row.endTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="结束日期">
              </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="projectFunding" label="项目资金（万元）" align="center" width="150">
            <template #default="scope">
<!--              :rules="listFormRules.projectFunding"-->
              <el-form-item :prop="'[' + scope.$index + '].projectFunding'" >
              <el-input type="number" v-model="scope.row.projectFunding" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="achievementProblem" label="活动介绍" align="center" width="300">
            <template #default="scope">
<!--              :rules="listFormRules.achievementProblem"-->
              <el-form-item :prop="'[' + scope.$index + '].achievementProblem'" >
              <el-input v-model="scope.row.achievementProblem" placeholder="请输入"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="100">
            <template #default="scope">
              <el-button type="text"  size="default" @click="handleDelete(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    </el-form>
    <el-dialog title="新增承接政府委托职能、购买服务项目、政府补贴情况" v-model="addDialog">
      <el-form  size="default" :model="postForm" ref="postForm" label-width="80px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="postForm.projectName" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="项目类型" prop="activityType">
              <el-select clearable  v-model="postForm.projectType" filterable placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="dict in projectTypeOptions"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="购买主体" prop="purchasingEntity">
              <el-input v-model="postForm.purchasingEntity" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="开始日期" prop="startTime">
              <el-date-picker
                style="width: 100%;"
                v-model="postForm.startTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="结束日期" prop="endTime">
              <el-date-picker
                style="width: 100%;"
                v-model="postForm.endTime"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="项目资金" prop="projectFunding">
              <el-input type="number" v-model="postForm.projectFunding" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="活动介绍" prop="achievementProblem">
              <el-input type="textarea" v-model="postForm.achievementProblem" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addList()">确 定</el-button>
      </div>
    </el-dialog>
    <div><p>注：</p>
      <p>
        实体机构是指社会组织因自身业务活动和与其宗旨相适应的需要，举办的事业性实体、经济实体(可以投资设立企业法人，也可以设立非法人的经营机构)或者民办非企业单位。
      </p></div>
  </div>
</template>
<script>

import {getDictByCode, getTableInfoByPage, stSaveEntrust} from "@/views/yearCheck/ykb/st/st";

export default {
  data() {
    return {
      addDialog:false,
      projectTypeOptions:undefined,
      listForm:[],
      postForm:{
        id:'',
        organizationBaseId:'',//社团组织id
        creditCode:localStorage.getItem("creditCode"),//统一社会信用代码
        examineYear:localStorage.getItem("examineYear"),//审查年度
        achievementProblem:'',//活动介绍
        endTime:'',//($date-time)结束时间yyyy-MM-dd
        projectFunding:'',//项目资金
        projectName:'',//活动名称
        projectType:'',//活动类型
        purchasingEntity:'',//购买主体
        startTime:'',//($date-time)开始时间
      },
      listFormRules: {
        projectType: [{ required: true, message: '请完善', trigger: 'blur' }],
        projectName: [{ required: true, message: '请完善', trigger: 'blur' }],
        purchasingEntity: [{ required: true, message: '请完善', trigger: 'blur' }],
        startTime: [{ required: true, message: '请完善', trigger: 'blur' }],
        endTime: [{ required: true, message: '请完善', trigger: 'blur' }],
        projectFunding: [{ required: true, message: '请完善', trigger: 'blur' }],
        achievementProblem: [{ required: true, message: '请完善', trigger: 'blur' }],
      }
    };
  },

  created() {

  },
  methods: {
    postInfo(){
      this.$refs.listFormRef.validate(valid=> {
        if (valid) {
          if(this.listForm == null || this.listForm.length == 0){
            return;
          }
          for (let i = 0; i < this.listForm.length; i++) {
            this.listForm[i].creditCode = localStorage.getItem("creditCode");
            this.listForm[i].examineYear = localStorage.getItem("examineYear");
          }
          stSaveEntrust(this.listForm).then(response => {
            this.$message({
              message: '本年度承接政府委托职能、购买服务项目、政府补贴情况保存成功！',
              type: 'success'
            });
          });
        }else{
          this.$message({
            message: '请填写完整！',
            type: 'error'
          });
        }
      });
    },
    addList(){
      // this.addDialog = false;
      this.listForm.push(Object.assign({}, this.postForm));
    },
    getInfo(){
      getDictByCode('governmentalFunctions').then(response => {
        this.projectTypeOptions = response.data;
      });

      getTableInfoByPage(21).then(response => {
        this.listForm = response.data;
        if(this.listForm == null  || this.listForm == ''){
          this.listForm = [];
        }
      });
    },
    handleDelete(index){
      this.listForm.splice(index, 1);
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ababab; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
